<template>
	<div class="article-box">
		<ul v-if="article.length" class="article-list">
			<li v-for="list in article">
				<!--缩略图-->
				<a v-link="{path:'/articleDetails?id='+list._id}" class="article-img">
					<img src="/resources/webSite/images/article.jpg">
					<span class="img-mask">阅 读</span>
				</a>
				<div class="article-content">
					<!--标题-->
					<h2 class="article-title">
						<a v-link="{path:'/articleDetails?id='+list._id}">{{list.title}}</a>
					</h2>
					<!--meta-->
					<div class="meta-box">
						<span>
							<i class="iconfont">&#xe602;</i> : {{list.releaseTime | getdate}}
						</span>
						<span>
							<i class="iconfont">&#xe600;</i> : {{list.author}}
						</span>
						<span>
							<i class="iconfont">&#xe601;</i> : {{list.comment.length}}
						</span>
					</div>
					<p>{{list.briefing}}</p>
				</div>
			</li>
		</ul>
		<h2 v-if="!article.length && !addLoading" class="error-title">{{msg}}</h2>
		<!--加载更多-->
		<loadingapp v-if="addLoading"></loadingapp>
		<div v-if="btnShow" class="add-btn" @click="getArticle">加载更多</div>
	</div>
</template>
<script>
	var loading = require("../public/loading.vue");
	export default{
		data(){
			return {
				article:[],
				addLoading:true,
				id:null,
				column:null,
				page:0,
				btnShow:false,
				url:"/getArticle",
				msg:""
			}
		},
		props:["type","keywords"],
		methods:{
			getArticle(){
				var th = this;
				th.addLoading = true;
				var data = {conditions:{column:th.column} , page:th.page};
				//判断关键词是否存在(存在则是搜索页)
				if(th.keywords){
					data = {title:th.keywords , page:th.page};
				};
				//执行请求
				th.$http.post(th.url , data , function(res){
					if(res.state == "ok"){
						setTimeout(function(){
							th.page++;
							th.addLoading = false;
							th.article = th.article.concat(res.article);
							if(res.article.length >= 10){
								th.btnShow = true;
							}else{
								th.btnShow = false;
							};
						} , 300);
					};
				},"JSON");
			},
			init(){
				//初始化
				var th = this;
				th.article = [];
				th.page = 0;
				th.addLoading = true;
				th.btnShow = false;
			}
		},
		route:{
			data(transition){
				this.init();
				this.url = "/getArticle";
				this.column = transition.to.query.id;
				//调用获取文章
				this.getArticle();
			}
		},
		components:{
			loadingapp:loading
		},
		ready(){
			var th = this;
			th.type && th.init();
			th.msg = "这个栏目博主还未发布文章哦!";
			switch (th.type){
				case "index":
					th.url = "/getArticle";
					th.getArticle();
					break;
				case "search":
					th.url = "/search";
					th.msg = "未找到您要搜索的内容，可以换个关键词试试哦!";
					th.getArticle();
					break;
			};
			this.$watch("keywords" , function(){
				th.init();
				th.getArticle();
			})
		}
	}
</script>
<style scoped>
	@import url("../../resources/webSite/css/article-list.css");
</style>
